<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/index.css}"> 
   <link rel="stylesheet" th:href="@{/static/css/animate.min.css}"> 
     <!-- require APlayer -->
    <link href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css" rel="stylesheet">
    <!-- 引入 layui.js -->
   <script src="/static/lib/layui/layui.js"></script>
   
     
   
    
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
   <script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">


   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	  
	  
	  
	  document.addEventListener('plusready', function() {
				var webview = plus.webview.currentWebview();
				plus.key.addEventListener('backbutton', function() {
					webview.canBack(function(e) {
						if (e.canBack) {
							webview.back();
						} else {
							//webview.close(); //hide,quit
							//plus.runtime.quit();
							//首页返回键处理
							//处理逻辑：1秒内，连续两次按返回键，则退出应用；
							var first = null;
							plus.key.addEventListener('backbutton', function() {
								//首次按键，提示‘再按一次退出应用’
								if (!first) {
									first = new Date().getTime();
									document.getElementById("toas").style.display= "block";
								    setTimeout(function(){
								    document.getElementById("toas").style.display= "none";
								    first = null;
								              },1000);
									//console.log('再按一次退出应用');
									//setTimeout(function() {
									//	first = null;
									//}, 1000);
								} else {
									if (new Date().getTime() - first < 1500) {
										plus.runtime.quit();
									}
								}
							}, false);
						}
					})
				});
			});

</script>

<div th:replace="fragment/head::head"> 

</div>

 
   
      
      <!--  弹出提示模块 -->
   <div id="toas" style="display: block;
                         position: fixed;
                         border-radius:5px;
                         top:80%;
                         background: gray;
                         left: 40%;
                         font-size:1.1rem;
                         opacity:0.9;
                         display:none;
                         z-index: 11 ">
    &nbsp;    &nbsp;  再次返回   &nbsp; &nbsp;
   </div>
 

    <div class="container mt-4" >
      
      <!-- 公告 -->
       <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           
           <svg xmlns="http://www.w3.org/2000/svg" style="color:green" width="20" height="20" fill="currentColor" class="bi bi-volume-up-fill" viewBox="0 0 16 16">
             <path d="M11.536 14.01A8.473 8.473 0 0 0 14.026 8a8.473 8.473 0 0 0-2.49-6.01l-.708.707A7.476 7.476 0 0 1 13.025 8c0 2.071-.84 3.946-2.197 5.303l.708.707z"/>
             <path d="M10.121 12.596A6.48 6.48 0 0 0 12.025 8a6.48 6.48 0 0 0-1.904-4.596l-.707.707A5.483 5.483 0 0 1 11.025 8a5.483 5.483 0 0 1-1.61 3.89l.706.706z"/>
             <path d="M8.707 11.182A4.486 4.486 0 0 0 10.025 8a4.486 4.486 0 0 0-1.318-3.182L8 5.525A3.489 3.489 0 0 1 9.025 8 3.49 3.49 0 0 1 8 10.475l.707.707zM6.717 3.55A.5.5 0 0 1 7 4v8a.5.5 0 0 1-.812.39L3.825 10.5H1.5A.5.5 0 0 1 1 10V6a.5.5 0 0 1 .5-.5h2.325l2.363-1.89a.5.5 0 0 1 .529-.06z"/>
          </svg>
         
          <span id="gonggao" style="font-size:15px"><span class='animated slideInRight' style='color:green'>关于页面基本完毕!</span></span> </p>
         </div>
       </div>
       
       
       <!-- 内容 -->
        <div class="row">
        
            <div class="col-lg-8 col-sm-12 ">
            
          <div th:each="blog,blogStat:${bloglist}"  class=" col-sm-12 top layui-anim layui-anim-scaleSpring">
           
            <div class="mt-3 tou fangda" style="background-color: white;padding-right:15px;">
                <div class="media" style="padding-left:15px;padding-top:10px;padding-bottom: 15px " > 
                
               
                  <img th:src="${blog.imgurl}" alt="背景图" style="width:30%" th:onclick="'blog(\''+${blog.id}+'\');'"/>
                  <div class="media-body" style="margin-left: 20px">
                  <a th:href="@{'/blog?id='+${blog.id}}" class="lianjie"> <span class="mt-0 bolgtitle" th:text="${blog.title}"></span></a> &nbsp;
                  <span th:class="${blog.flag=='原创'?'ui green label':'ui yellow label'}" th:text="${blog.flag}" style="font-size:7px">原创</span>
                  
                  <span th:if="${blog.id==bloglistre[0].id || blog.id==bloglistre[1].id || blog.id==bloglistre[2].id || blog.id==bloglistre[3].id || blog.id==bloglistre[4].id}"> <img alt="" src="../static/img/hot.png" style="width:23px;margin-top: -8px"> </span>
                  <p class="jianjie"  th:text="${blog.getSummary()}" style="font-size: 14px;text-indent: 2em;margin-top: 3px"> </p>
                 
                  </div> 
                 </div>
           
               
               <p class="shiying" style="color:darkgray;margin-left: 15px;margin-bottom: 15px">
                   <i class="layui-icon layui-icon-friends" style="font-size:0.8rem;color: darkgray"></i> <span  >益达</span>
                   <i class="layui-icon layui-icon-time" style="font-size:0.8rem;color: darkgray"></i> <span   th:text="${blog.getReleaseDate()}"></span>
               
               <!-- 分类 -->
                    <i class="icon folder"></i>
                    <span>
                    <a  class="lianjie2" th:href="@{'/types?id='+${blog.typeID.id}}" th:text="${blog.typeID.type}"></a>
                    </span>
                    
                <!-- 标签 -->
                   <i class="tags icon"> </i>
                 
                   <a th:each="tag,tagStat:${blog.tags}" >
                       <a th:href="@{'/blog/index?id='+${tag.id}}" th:text="${tag.name}" class="lianjie2"> </a>&nbsp;
                   </a>
       
               
               <strong class="you" style="float:right">
                 <!-- 眼睛 -->
                 <i class="icon eye"> </i>
                 <span th:text="${blog.getClickHit()}"></span>
                  
                  <!-- 评论 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16"> <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/><path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>  </svg>
                 <a th:text="${blog.replyHit.size()}"></a>
               </strong> 
                 
                   </p>
               
             </div>
            
        </div> 
       
         <div class="col-sm-12 top">
            <ul class="pagination" style="margin:0 auto;width:207px">
              <li class="page-item"><a class="page-link" th:href="@{${tagselectid}==null?'/blog/index?page=1':'/blog/index?page=1&id='+${tagselectid}}">首页</a></li>
              <li class="page-item"><a class="page-link"  th:href="@{${tagselectid}==null?'/blog/index?page='+${cpage-1<=0?1:cpage-1}:'/blog/index?page='+${cpage-1<=0?1:cpage-1}+'&id='+${tagselectid}}">  < </a></li>
              <li class="page-item"><a class="page-link" th:text="${cpage}+'/'+${pages}">  </a></li>
              <li class="page-item"><a class="page-link" th:href="@{${tagselectid}==null?'/blog/index?page='+${cpage+1>=pages?pages:cpage+1}:'/blog/index?page='+${cpage+1>=pages?pages:cpage+1}+'&id='+${tagselectid}}">  > </a></li>
              <li class="page-item"><a class="page-link" th:href="@{${tagselectid}==null?'/blog/index?page='+${pages}:'/blog/index?page=1&id='+${tagselectid}}">尾页</a></li>
                                                        
            </ul>
         </div>
		 
  </div>
      
       
        
           <div class="col-lg-4 col-sm-12 col-12  top"> 
                
                <!-- 博主 -->
                 <div class="card text-center layui-anim layui-anim-up">
                      <div class="card-body">
                        <div class="card-title"><img alt="" th:src="@{${blogger.imageurl}}" style="width:50%;border-radius: 50%" class="tou zhuan"> </div>
                        <h2 class="card-title" ><b>Smile</b>  </h2>
                          <p class="card-text" style="font-size: 1.2rem"><span th:text="${blogger.nickName}">一枚Java渣</span>&nbsp; <span th:text="${blogger.sign}">但行好事 莫问前程</span> </p>
                        
                           <p class="card-text" style="color:darkgrey">
                             <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-cursor-fill" viewBox="0 0 16 16"><path d="M14.082 2.182a.5.5 0 0 1 .103.557L8.528 15.467a.5.5 0 0 1-.917-.007L5.57 10.694.803 8.652a.5.5 0 0 1-.006-.916l12.728-5.657a.5.5 0 0 1 .556.103z"/> </svg> 
                             <span th:text="${blogger.profile}">湖北-武汉</span>
                           </p>
                          
                        <div class="card-footer text-muted" id="icons">
                          <i id="iconqq" class="layui-icon layui-icon-login-qq"></i></span>  &nbsp; &nbsp; &nbsp;
                          <i id="iconwx" class="layui-icon layui-icon-login-wechat"></i>  &nbsp; &nbsp; &nbsp;
                          <a  href="/about"> <i id="iconly" class="layui-icon  layui-icon-reply-fill"></i> </a> 
                        </div> 
                       
                      </div>
                 </div>
                                     

       <!-- 标签 -->
           <div class="ui segments layui-anim layui-anim-up">
            <div class="ui secondary segment">
            <div class="ui two column grid">
              <div class="column">
                <i class="tags icon"> </i>标签
              </div>
              <div class="right aligned column">
                 <a href="#" target="_blank">more <i class="angle double right icon"> </i> </a>
               </div>
             </div>           
             </div>
             
             <div class="ui teal segment">
             
               <a th:each="tag,tagStat:${tags}"   th:href="@{'/blog/index?id='+${tag.id}}" target="_black" class="ui teal basic left pointing label m-margin-tb-tiny">
                  <span th:text="${tag.getName()}"> </span>
                </a>
                
              </div>
            </div>
            
            
          <!-- 热文排行 -->  
           <div class="ui segments top layui-anim layui-anim-up">
           
              <div class="ui secondary segment">
               <i class="layui-icon layui-icon-fire"></i> 热文排行
              </div>
              
               <div th:each="blog,blogStat:${bloglistre}" class="ui segment fonts">
                  <div class="ui two column grid">
                  
                     <div class="column left" style="width:77%">
                         <span th:text="${blogStat.count}" th:style="'background-color:'+ ${blogStat.count<=3? '#ff5722':'#1e9fff'} +';padding-left:6px;padding-right:5px'"> </span> &nbsp; <a  th:href="@{'/blog?id='+${blog.id}}" target="_blank" class="m-black m-text-thin "> <span th:text="${blog.title}">热文</span>  </a>
                     </div>
                  
                      <div class="right aligned column" style="width:23%;padding-left:0">
                        <i class="eye icon"> </i> <span th:text="${blog.clickHit}">15</span>
                      </div>
                      
                   </div> 
                   
               </div>
               
            
               
          </div>
        
        
        <!-- 时间线 -->
      <div class="ui segments top layui-anim layui-anim-up">
           
              <div class="ui secondary segment">
               <i class="layui-icon layui-icon-edit"></i> 最新日志
              </div>
           
          <div class="ui segment fonts">    
             <ul class="layui-timeline" id="log">
             
                 <li th:each="log,logStat:${loglist}" class="layui-timeline-item">
                     <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                     <div class="layui-timeline-content layui-text">
                       <h3 th:text="${log.getDate()}" class="layui-timeline-title">日期</h3>
                          <p  th:text="${log.text}">
                    无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
                          </p>
                      </div>
                </li>
                
            </ul>
        </div>
        
          <div  class="ui segment fonts">
            <div class="ui two column grid center"> 
                   <button onclick="huoqu()" style="margin: 0 auto;width: 100px" class="btn btn-outline-success my-2 my-sm-0">   加载更多 </button>        
            </div>
          </div>
        
  </div>


       
       <!-- 对应的占四分的阑珊 -->
       </div>
       
        <!--对应class="row"  -->
       </div>
   
 
    
      <!--对应的最外层的contro标签 -->
    </div>
    
    <!-- 底部 -->
    <footer  class="ui inverted vertical segment m-padded-tb-massive">
          <div class="ui center aligned container">
         <p style="text-align:center">
           <a href="http://beian.miit.gov.cn/" target="_blank" style="color:white">网站备案 : 鄂ICP备2021015615号</a>
         </p>   
             
          </div> 
      </footer>
    
    
    
    
    
    
    
    
    
    <!-- qq模块 -->
<div class="ui qq flowing popup transition hidden"style="padding: 2px">
  <div class="ui orange basic label" >
     <div class="image">
      <img src="../static/img/qq.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- wx模块 -->
 <div class="ui wx flowing popup transition hidden" style="padding: 2px">
  <div class="ui orange basic label">
     <div class="image">
      <img src="../static/img/wx.jpg" style="width:80px"/>
     </div>
  </div>
 </div>
 
 <!-- 留言模块 -->
  <div class="ui ly flowing popup transition hidden" >
       去留言~
  </div>
 
 <!-- 音乐组件 -->
    <div>
      <meting-js 
	           server="tencent" 
	           type="playlist" 
	           id="8172845083"
	           loop="all"
	           order="random"
	           preload="auto"
	           fixed="true" mini="true"
	           >
     </meting-js>
   </div>
   
   
</body>

 <script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script> 
 <!-- require MetingJS -->
 <script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>
 <script src="/static/js/layer.js" ></script>
<script type="text/javascript">
   function blog(id){
       window.location.href="/blog?id="+id;
   }


  $('#iconqq').popup({
        popup : $('.qq'),
        on : 'hover',
        position: 'top center'
    });
      $('#iconwx').popup({
        popup : $('.wx'),
        on : 'hover',
        position: 'top center'
    });
  $('#iconly').popup({
        popup : $('.ly'),
        on : 'hover',
        position: 'top center'
    }); 
    
    <!--
     window.onresize = function(){
     var width = document.body.offsetWidth;
      if(width>749 && width<973){
         document.getElementById("Search").style.display="none";
      }else{
        $('#Search').css('display','inline-block');
      }
    }
    -->
    
    $(".zhuan").mousemove(function() {
    	$(this).addClass("layui-anim-rotate");
    })
     $(".zhuan").mouseout(function() {
    	$(this).removeClass("layui-anim-rotate");
    });
    
    var page=1;
    //获取日志
     var cishu = 0;
    function huoqu(){
       page = page+1;
     
       $.get(
		"/blog/logmore?page="+page,
		function(data){
		if(Object.keys(data).length>0){
           for(var i in data){
           //追加元素
             $("#log").append("<li  class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i> <div class='layui-timeline-content layui-text'><h3  class='layui-timeline-title'>"+data[i].date+"</h3><p>"+data[i].text+"</p> </div></li>");      
           }
       }else{ 
            cishu++;
           if(cishu < 2){
              $("#log").append("<li  class='layui-timeline-item'> <i class='layui-icon layui-timeline-axis'>&#xe63f;</i> <div class='layui-timeline-content layui-text'><h3  class='layui-timeline-title'>到底了~</h3></div></li>");
           }
          
           
       }
       
		  }
		  
    )}
    
    //公告
     $(function(){ 
      var gonggao = ["<span class='animated slideInRight' style='color:red'>本站已集成QQ登录!</span>",
      "<span class='animated slideInRight' style='color:green'>新增个人信息页面!</span>",
      "<span class='animated slideInRight' style='color:blue'>新增友链页面并支持自行提交!</span>"];
      var index=2;
      var ding = setInterval(function(){
      $('#gonggao').html(gonggao[index]);
       index++;
      if(index==3){
        index=0;
      }
    },3000)
    })
    
    
</script>

</html>